/*
  学习目标：子传父技术- 与vue类似
  💥 父组件，传一个函数给子组件
  💥 子组件：调用父组件传来的函数,传回数据即可
 */

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  state = {
    money: 20000,
  };
  // 1
  handlelCostFn = (num) => {
    console.log('num----->', num);
    // 通过setState触发更新视图
    this.setState({
      money: this.state.money - num,
    });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClickMoney}>父亲开始赚钱</button>
        {/* 1.传递数据给子组件 */}
        {/* 2 */}
        <Child
          money={this.state.money}
          handlelCost={this.handlelCostFn}
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  handlelChildCost = () => {
    this.props.handlelCost(1000);
  };
  render() {
    // console.log('this.props----->', this.props);
    // const { money, handlelCost } = this.props;
    return (
      <div>
        {/* <h3>父亲给我钱了：{money}</h3> */}
        {/* 调用时需要传递参数，可以改成函数，在函数里面再调用handlelCost，传递参数即可 */}
        {/* 3 */}
        {/* <button onClick={() => handlelCost(1000)}>花钱了</button> */}
        <button onClick={this.handlelChildCost}>花钱了</button>
      </div>
    );
  }
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
